<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select Input | Onsen UI</title>
  <link rel="stylesheet" href="../styles/app.css"/>
  <link rel="stylesheet" href="../../node_modules/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="../../node_modules/onsenui/css/onsen-css-components.css">

  <script src="../../node_modules/onsenui/js/onsenui.js"></script>
  <script src="../../node_modules/angular/angular.js"></script>
  <script src="../../dist/angularjs-onsenui.js"></script>
  <script>
    ons.bootstrap()
      .controller('PageController', function($scope) {
        $scope.selectedModifier = 'basic';
        $scope.editSelects = function() {
          document.getElementById('choose-sel').removeAttribute('modifier');
          if (event.target.value == 'material' || event.target.value == 'underbar') {
            document.getElementById('choose-sel').setAttribute('modifier', event.target.value);
          }
        }
      });
  </script>

</head>

<body>
  <ons-page ng-controller="PageController">
    <ons-toolbar><div class="center">Select Input</div></ons-toolbar>
    <div style="margin: 10px">
      <p>Choose which select input you want to see:<p>
      <ons-select ng-model="selectedModifier" id="choose-sel" ng-change="editSelects()">
        <option value="basic">Basic</option>
        <option value="material">Material</option>
        <option value="underbar">Underbar</option>
      </ons-select>
      <p>Modifier <strong>{{ selectedModifier }}</strong> looks great.</p>
    </div>
  </ons-page>
</body>
</html>
